<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
</head>
<body>

<div id="root">
    <input type="text" @keyup.ctrl="showInfo">
</div>

<script type="text/javascript">
    // 阻止vue在启动时生成生产提示
    Vue.config.productionTip = false

    /**
     * 按键别名
     *      enter  原始的js是Enter
     *      delete 捕获删除和退格键
     *      esc
     *      space
     *      tab  本身就有一个焦点，按下切走， 配合@keyDown使用
     *      up
     *      down
     *      left
     *      right
     *
     *      没有的可以用
     *      驼峰的转成小写带-
     *      caps-lock
     *
     *      ctrl alt shift meta(win键或command键)
         *      @keyup 按下修饰键，需要配合其它按键，事件才触发，就是组合使用
         *      @keydown使用 不需要组合，直接触发事件
     *
     *      使用keyCode指定按键也可以，但是不推荐，mdn已经从web标准中删除
     *          @keydown.13
     *
     *      自定义键名
     *          Vue.config.keyCodes.自定义键名 = 键码
     */
    Vue.config.keyCodes.huiche = 13 // 不推荐使用
    const vm = new Vue({
        el:"#root",
        data: {
            name:"vue"
        },
        methods: {
            showInfo(event) {
                console.log(this)
                console.log(event.key)
                // console.log(event.keyCode)
                console.log(event.target.value)
            }
        }
    });

</script>
</body>
</html>